<template>
	<el-dialog :title="dialogTitle" :visible.sync="visible" width="768px" append-to-body :close-on-click-modal="false">
		<el-form ref="form" :model="formData" :rules="formRules" class="personnel_info_wrapper">
			<el-row :gutter="16">
				<el-col :span="8">
					<el-form-item label="人员姓名" prop="name">
						<el-input v-model="formData.name" placeholder="输入人员姓名"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="人员性别" prop="gender">
						<el-radio-group v-model="formData.gender" :aria-hidden="false">
							<el-radio v-for="(item, index) in dict.type.sys_user_sex" :key="index" :label="item.value">{{ item.label }}</el-radio>
						</el-radio-group>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="手机号码" prop="phoneNumber">
						<el-input v-model="formData.phoneNumber" maxlength="11" placeholder="输入手机号码"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="人员邮箱" prop="email">
						<el-input v-model="formData.email" placeholder="输入人员邮箱"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="身份证号" prop="idCard">
						<el-input v-model="formData.idCard" maxlength="18" placeholder="输入身份证号"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="人员年龄" prop="age">
						<template v-if="!!formData.age && formData.age > 0">
							<span class="text">{{ formData.age }}</span>
							<span class="unit">岁</span>
						</template>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="最高学历" prop="highestDegree">
						<el-select v-model="formData.highestDegree" placeholder="选择最高学历" style="width: 100%">
							<el-option v-for="(item, index) in dict.type.sp_highest_degree" :key="index" :label="item.label" :value="item.value"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="是否到出入境登记备案" prop="isClassFiling">
						<el-switch v-model="formData.isClassFiling" active-value="1" inactive-value="2"></el-switch>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="是否统一保管出入境证件" prop="isUnifiedCustody">
						<el-switch v-model="formData.isUnifiedCustody" active-value="1" inactive-value="2"></el-switch>
					</el-form-item>
				</el-col>
				<el-col :span="16">
					<el-form-item label="涉密岗位" prop="postId">
						<el-select v-model="formData.postId" :loading="remoteLoading" v-bind="selectConfig">
							<el-option v-for="(item, index) in postListData" :key="index" :label="item.label" :value="item.value"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="身份类型" prop="identityType">
						<el-select v-model="formData.identityType" placeholder="选择身份类型" style="width: 100%">
							<el-option v-for="(item, index) in dict.type.sp_people_type" :key="index" :label="item.label" :value="item.value"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<template v-if="formData.identityType === '1'">
					<el-col :span="8">
						<el-form-item label="职务" prop="deptZw">
							<el-input v-model="formData.deptZw" placeholder="输入职务"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="职级" prop="deptZj">
							<el-input v-model="formData.deptZj" placeholder="输入职级"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="职称" prop="deptZc">
							<el-input v-model="formData.deptZc" placeholder="输入职称"></el-input>
						</el-form-item>
					</el-col>
				</template>
				<el-col :span="24">
					<el-form-item label="备注" prop="remark">
						<el-input
							type="textarea"
							v-model="formData.remark"
							resize="none"
							:autosize="{ minRows: 2, maxRows: 4 }"
							placeholder="输入备注"
						></el-input>
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
		<template slot="footer">
			<el-button size="medium" @click="visible = false">取消</el-button>
			<el-button size="medium" type="primary" @click="handleSubmitData()">确定</el-button>
		</template>
	</el-dialog>
</template>

<script>
import moment from 'moment';
import imageUpload from './uploader';
import formMixins from '../common/formMixins';
import { listSpPost } from '@/api/personnal/spPost';
import { getUser, addUser, updateUser } from '@/api/personnal/person';
const reg = /^[1-9]\d{5}(18|19|20|21|22)?\d{2}(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])\d{3}(\d|[Xx])$/;
export default {
	mixins: [formMixins],
	components: { imageUpload },
	dicts: [
		'sys_user_sex',
		'sp_highest_degree',
		'sp_people_type',
		'sp_user_type',
		'sp_post_basis',
		'sp_level',
		'sp_leader_type',
		'sp_project_type',
		'sp_certificate_type'
	],
	data() {
		const checkIdNo = (rule, value, callback) => {
			if (reg.test(value) === false) {
				callback(new Error('请输入正确的身份证号码'));
			} else {
				callback();
			}
		};
		return {
			formName: '涉密人员',
			remoteLoading: false,
			formRules: {
				//基本信息
				name: { required: true, message: '请填写姓名', trigger: 'blur' },
				gender: { required: true, message: '请选择性别', trigger: 'change' },
				phoneNumber: [
					{ required: true, message: '请填写手机号码', trigger: 'blur' },
					{ pattern: /^1[3|4|5|7|8][0-9]\d{8}$/, message: '手机号码格式不正确', trigger: 'blur' }
				],
				email: [
					{ required: true, message: '请填写电子邮件', trigger: 'blur' },
					{ type: 'email', message: '请输入正确的电子邮件地址', trigger: 'blur' }
				],
				idCard: [
					{ required: true, message: '请输入身份证号', trigger: 'blur' },
					{ validator: checkIdNo, trigger: 'blur' }
				],
				highestDegree: { required: true, message: '请选择最高学历', trigger: 'change' },
				identityType: { required: true, message: '请选择身份类型', trigger: 'change' },
				deptZw: { required: true, message: '请填写职务', trigger: 'blur' },
				deptZj: { required: true, message: '请填写职级', trigger: 'blur' },
				deptZc: { required: true, message: '请填写职称', trigger: 'blur' },

				//人事信息
				userNum: { required: true, message: '请填写人事号', trigger: 'blur' },
				userType: { required: true, message: '请选择用人形式', trigger: 'change' },
				deptName: { required: true, message: '请填写单位/部门', trigger: 'blur' },
				startDate: { required: true, message: '请选择上岗时间', trigger: 'change' },
				postName: { required: true, message: '请填写岗位名称', trigger: 'blur' },
				postBasis: { required: true, message: '请选择岗位确定依据', trigger: 'change' },
				spLevel: { required: true, message: '请选择涉密等级', trigger: 'change' },
				managementType: { required: true, message: '请选择管理干部类型', trigger: 'change' },
				engageInProject: { required: true, message: '请选择事项', trigger: 'change' },
				certificateType: { required: true, message: '请选择证件类型', trigger: 'change' }
			},
			dateConfig: {
				type: 'date',
				style: { width: '100%' },
				valueFormat: 'yyyy-MM-dd',
				placeholder: '选择上岗时间'
			},
			selectConfig: {
				remote: true,
				multiple: false,
				filterable: true,
				reserveKeyword: true,
				style: { width: '100%' },
				placeholder: '请输入关键词',
				remoteMethod: this.handleRemoteMethod
			},
			postListData: []
		};
	},
	computed: {
		detailFunction() {
			return eval(getUser);
		},
		callFunction() {
			return eval(this.addOrEdit ? addUser : updateUser);
		}
	},
	watch: {
		'formData.idCard': {
			handler(val) {
				if (!!reg.test(val)) {
					let birthDate = moment(val.substring(6, 14), 'YYYYMMDD');
					this.$set(this.formData, 'age', moment().diff(birthDate, 'years'));
				} else {
					this.$delete(this.formData, 'age');
				}
			}
		}
	},
	methods: {
		//格式化请求参数
		formatRequestParams() {
			let params = { ...this.formData };
			return params;
		},

		//查询数据文件
		handleRemoteMethod(postName) {
			if (!postName) {
				this.postListData = [];
			} else {
				this.remoteLoading = true;
				this.getPostListData(postName);
			}
		},

		//获取岗位列表数据
		async getPostListData(postName) {
			let params = { page: 1, limit: 99, postName };
			let result = await listSpPost(params);
			this.remoteLoading = false;
			if (result.code === 200) {
				let datas = result.rows || [];
				this.postListData = datas.map((n) => {
					return { label: n.postName, value: n.postId };
				});
			}
		}
	}
};
</script>
<style lang="scss" scoped>
.personnel_info_wrapper::v-deep {
	.el-form-item__label {
		display: block;
		float: none;
		line-height: 1;
		text-align: left;
		margin-bottom: 10px;
	}
	.el-form-item__content {
		min-height: 36px;
	}
}
</style>
